<script setup>
// 定义组件属性
const props = defineProps({
  show: {
    type: Boolean,
    required: true
  }
})

// 定义关闭事件
const emit = defineEmits(['close'])
</script>

<template>
  <Teleport to="body">
    <Transition name="modal">
      <div v-if="show"
        class="fixed z-[9998] top-0 left-0 w-full h-full bg-[#00000080] flex transition-opacity duration-300 ease-in-out">
        <div
          class="modal-container m-auto pt-[20px] pb-[20px] pl-[15px] pr-[15px] bg-[#fff] rounded-[2px] transition-all duration-300 ease-in-out rounded-lg shadow-[0_2px_8px_rgba(0,0,0,0.33)]">
          <div class="mt-0 text-xl font-semibold">
            <slot name="header">default header</slot>
          </div>

          <div class="mt-[30px] mb-[30px] pl-[15px] pr-[15px]">
            <slot name="body">default body</slot>
          </div>

          <div>
            <slot name="footer">
              <button class="float-right" @click="emit('close')">OK</button>
            </slot>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style>
/* 过渡动画样式 */
.modal-enter-from {
  opacity: 0;
}

.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>